<script setup>
import {onMounted, reactive} from "vue";
import {getMusicList} from "@/request/api/home";
import {useRouter} from "vue-router";

const state = reactive({
    musicList: []
})
onMounted(async () => {
    let res = await getMusicList(10);
    state.musicList = res.data.result;
})

// 播放量换算函数
function changeCount(num) {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
    } else return num;
}

const userRouter = useRouter();

function pushRouter(to) {
    userRouter.push({
        // 隐式传参 url中不显示参数
        // name: 'DetailList',
        // params: {
        //     id: to,
        // }
        // 显示传参 url中显示参数
        path: '/list',
        query: {
            id: to,
        }
    })
}
</script>

<template>
    <div class="musicListBar">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="listContent">
            <van-swipe class="listSwiper" :loop="false" :width="150" :show-indicators="false">
                <van-swipe-item v-for="item in state.musicList" :key="item.id">
                    <!-- router-link 实现跳转-->
                    <!-- <router-link :to="{path:'/DetailList',query:{id:item.id}}">-->
                    <!--     <img class="image" :src="item.picUrl" alt=""/>-->
                    <!--     <span class="playCount">-->
                    <!--         <svg class="icon" aria-hidden="true">-->
                    <!--           <use xlink:href="#icon-24gl-play"></use>-->
                    <!--         </svg>-->
                    <!--         {{ changeCount(item.playCount) }}-->
                    <!--     </span>-->
                    <!--     <span class="MusicName">{{ item.name }}</span>-->
                    <!-- </router-link>-->
                    <!--useRouter实现-->
                    <div @click="pushRouter(item.id)">
                        <img class="image" :src="item.picUrl" alt=""/>
                        <span class="playCount">
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-24gl-play"></use>
                            </svg>
                            {{ changeCount(item.playCount) }}
                        </span>
                        <span class="MusicName">{{ item.name }}</span>
                    </div>
                </van-swipe-item>

            </van-swipe>
        </div>
    </div>
</template>

<style scoped lang="less">
@whiteColor: #F5F5F7;
.musicListBar {
    width: 100%;
    height: 5rem;
    padding: 0.2rem;

    .musicTop {
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2rem;

        .title {
            font-size: 0.4rem;
            font-weight: 900;
            margin-left: 5px;
        }

        .more {
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
            margin-right: 5px;
        }

    }

    .listContent {
        width: 100%;
        height: 4rem;

        .listSwiper {
            height: 100%;

            .image {
                width: 100%;
                height: 3rem;
                border-radius: 0.22rem;
            }

            .playCount {
                position: absolute;
                right: 0.20rem;
                top: 0.1rem;
                font-size: 0.24rem;
                color: @whiteColor;
                display: flex;
                align-items: center;

                .icon {
                    margin-top: 0.01rem;
                    width: 0.3rem;
                    height: 0.3rem;
                    fill: @whiteColor;
                }
            }

            .MusicName {
                height: 0.6rem;
                width: 100%;
                font-size: 0.24rem;
                line-height: 0.40rem;
                overflow: hidden; /*超出部分隐藏*/
                text-overflow: ellipsis; /*超出部分省略号表示*/
            }
        }
    }
}
</style>